<template>
    <div>
        <el-input v-model="selectName" placeholder="请输入内容" style="width: 70%;"></el-input>
                <el-button type="primary" plain icon="el-icon-search" @click="getList"></el-button>
        <el-table :data="tableData" border style="width: 100%"  height=70vh>
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column label="文档名" prop="name" width="650">
            </el-table-column>
            <el-table-column label="大小/MB" prop="size" width="150">
            </el-table-column>
            <el-table-column label="更新时间" prop="date" width="150">
            </el-table-column>
            <el-table-column label="操作" width="200">
                <template slot-scope="scope">
                    <el-dropdown :hide-on-click="false">
                        <span class="el-dropdown-link">
                            预览/编辑<i class="el-icon-arrow-down el-icon--right"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item icon="el-icon-view"
                                @click.native="handlePreview( scope.row)">预览</el-dropdown-item>
                            <el-dropdown-item icon="el-icon-edit"
                                @click.native="handleEdit( scope.row)">编辑</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </template>
            </el-table-column>
        </el-table>

        <el-row>
            <el-col :span="24">
                <div style="padding-top: 20px;">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :current-page="currentPage" :page-sizes="[5, 10, 50, 100]" :page-size="5"
                        layout="total, sizes, prev, pager, next, jumper" :total="total">
                    </el-pagination>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import DocumentApi from '../../api/classify'

const options = {
    data() {
        return {
            tableData: [],
            currentPage: 1,
            pageSize: [5],
            total: 0,
            selectName: ''
        }
    },
    methods: {
        async getList() {
            let that = this;
            let param = new URLSearchParams();
            param.append('pageNumber', this.currentPage);
            param.append('pageSize', this.pageSize);
            param.append('name', this.selectName)
            await DocumentApi.getDocList(param).then(res => {
                console.log(res)
                that.total = res.data.data.total
                that.tableData = [];
                for (let i = 0; i < that.total; i++) {
                    that.tableData.push({
                        id: res.data.data.records[i].id.toString(),
                        name: res.data.data.records[i].displayName,
                        size: res.data.data.records[i].displaySize,
                        date: res.data.data.records[i].updateTime
                    })
                }
            }).catch(function (err) {
                // that.$message(err);
                // console.log(err)
               
            })
        },
        handleSizeChange: function (val) {
            console
            this.pageSize = val;
            this.getList();
            console.log(this.pagesize)  //每页下拉显示数据
        },
        handleCurrentChange: function (val) {
            this.currentPage = val;
            console.log(this.currentPage)  //点击第几页
            this.getList();
        },
        //预览
        handlePreview( row) {
            let flag = "false"
            let routeUrl = this.$router.resolve({
                path: "/office/" + row.id+"/"+flag
            });
            window.open(routeUrl.href, '_blank')
            console.log(row)
        },
        //编辑
        handleEdit( row) {
            let flag = "true"
            let routeUrl = this.$router.resolve({
                path: "/office/" + row.id+"/"+flag
            });
            window.open(routeUrl.href, '_blank')
            console.log(row)
        }
    },
    mounted() {
        this.getList();
    }
}
export default options


</script>
<style scoped>
.el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
}

.el-icon-arrow-down {
    font-size: 12px;
}
</style>